<template>
  <sc-dialog :title="titleMap[mode]" v-model="visible" :width="1000" destroy-on-close @closed="$emit('closed')">
    <el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="130px" label-position="left">
      <el-card shadow="never" header="基础配置">
        <el-form-item label="运行语言" prop="language">
          <el-select v-model="form.language" placeholder="请选择运行语言" @change="languageChange">
            <el-option v-for="item in languageList" :key="item.lang" :label="item.text" :value="item.lang"> </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="示例代码文件名" prop="examplesFileName">
          <el-input v-model="form.examplesFileName" clearable></el-input>
        </el-form-item>
        <el-form-item label="示例代码" prop="examples">
          <el-input v-model="form.examples" clearable type="textarea" :rows="10"></el-input>
        </el-form-item>
        <el-form-item label="执行代码文件名" prop="execFileName">
          <el-input v-model="form.execFileName" clearable></el-input>
        </el-form-item>
      </el-card>
      <el-card shadow="never" header="扩展代码" style="margin-top: 20px">
        <el-button type="primary" icon="el-icon-plus" @click="addExtensionCode()" style="margin-bottom: 10px"></el-button>
        <el-card v-for="(item, index) in form.extensionCodes" :key="index" style="margin-top: 10px">
          <div style="margin-bottom: 10px; text-align: right">
            <el-button icon="el-icon-delete" style="color: red" @click="removeHandle(index)"></el-button>
          </div>

          <el-form-item
            label="代码文件名"
            :prop="'extensionCodes.' + index + '.name'"
            :rules="[
              {
                required: true,
                message: '请输入代码文件名，例如c#中的Main.cs',
                trigger: 'blur',
              },
            ]"
          >
            <el-input v-model="item.name" clearable></el-input>
          </el-form-item>
          <el-form-item
            label="代码"
            :prop="'extensionCodes.' + index + '.code'"
            :rules="[
              {
                required: true,
                message: '请输入代码',
                trigger: 'blur',
              },
            ]"
          >
            <el-input v-model="item.code" clearable type="textarea" :rows="10"></el-input>
          </el-form-item>
          <!-- </div> -->
        </el-card>
      </el-card>

      <el-card shadow="never" header="依赖代码" style="margin-top: 20px">
        <el-select v-model="form.dependCodes" placeholder="请选择运行语言" multiple>
          <el-option v-for="item in dependCodesList" :key="item.languageExtensionCodeId" :label="item.title" :value="item.languageExtensionCodeId"> </el-option>
        </el-select>
      </el-card>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
    </template>
  </sc-dialog>
</template>

<script>
import { defineAsyncComponent } from 'vue';
const scEditor = defineAsyncComponent(() => import('@/components/scEditor'));
export default {
  components: {
    scEditor,
  },
  emits: ['success', 'closed'],
  data() {
    return {
      mode: 'add',
      titleMap: {
        add: '新增',
        edit: '编辑',
        show: '查看',
      },
      visible: false,
      isSaveing: false,
      //表单数据
      form: {
        questionId: '',
        questionName: '',
        questionDescribe: '',
        examplesFileName: '',
        examples: '',
        questionCase: '',
        extensionCodes: [],
        language: '',
        dependCodes: [],
      },
      //验证规则
      rules: {
        language: [{ required: true, message: '请选择运行语言' }],
        questionName: [{ required: true, message: '请输入试题名称' }],
        questionDescribe: [{ required: true, message: '请输入试题描述' }],
        examplesFileName: [
          {
            required: true,
            message: '请输入示例代码的文件名称，例如c#中的Main.cs',
          },
        ],
        examples: [{ required: true, message: '请输入示例代码' }],
        execFileName: [
          {
            required: true,
            message: '请输入执行代码的文件名称，例如c#中的Main.cs',
          },
        ],
      },
      languageList: [],
      dependCodesList: [],
    };
  },
  mounted() {
    this.languages();
  },
  methods: {
    removeHandle(index) {
      this.form.extensionCodes.splice(index, 1);
    },
    async languageChange(data) {
      this.form.language = data;
      this.renderLanguageExtensionCodes(data);
    },
    async renderLanguageExtensionCodes(lang) {
      var res = await this.$API.language.codeListByLang.get(lang);
      this.dependCodesList = res.data;
    },
    async languages() {
      var res = await this.$API.language.available.get();
      this.languageList = res.data;
    },
    addExtensionCode() {
      if (this.form.extensionCodes == undefined) {
        this.form.extensionCodes = [];
      }
      this.form.extensionCodes.push({ name: '', code: '' });
    },
    //显示
    open(mode = 'add') {
      this.mode = mode;
      this.visible = true;
      return this;
    },
    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async valid => {
        if (valid) {
          this.isSaveing = true;
          var request = {
            questionId: this.form.questionId,
            languages: [this.form],
          };
          var res = await this.$API.question.languageSet.post(request);

          this.isSaveing = false;
          if (res.code == 200) {
            this.$emit('success');
            this.visible = false;
            this.$message.success('操作成功');
          } else {
            this.$alert(res.message, '提示', { type: 'error' });
          }
        }
      });
    },
    //表单注入数据
    async setData(data) {
      //var detail = await this.$API.question.detail.get(data.questionId);
      this.form = data;
      this.form.dependCodes = data.dependCodesList;
      this.form.questionId = data.questionId;
      await this.renderLanguageExtensionCodes(this.form.language);

      //可以和上面一样单个注入，也可以像下面一样直接合并进去
      //Object.assign(this.form, data)
    },
  },
};
</script>

<style></style>
